<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style media="screen">
    .my-panel {width:80%; position:absolute; z-index:100; left:50%; top:100px; margin-left:-40%; display:none;}
    .my-panel-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.6; z-index:99; display:none;}


    .my-dialog {width:300px; position:absolute; z-index:100; left:50%; top:200px; margin-left:-150px; display:none;}
    .my-dialog-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.3; z-index:99; display:none;}
    </style>
  </head>
  <body>
    <!--表格-->
    <a href="#" class="btn btn-default glyphicon glyphicon-plus">添加商品</a>
    <table class="table">
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>库存</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>xxx衣服</td>
          <td>￥39.6</td>
          <td>537</td>
          <td>
            <a href="#" class="glyphicon glyphicon-trash">删除</a>
          </td>
        </tr>
      </tbody>
    </table>

    <!--面板-->
    <div class="my-panel-shadow"></div>
    <div class="panel panel-default my-panel">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        <form class="form form-horizontal" action="index.html" method="post">
          <div class="form-group">
            <label class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" placeholder="请输入商品名称">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">价格</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="price" placeholder="请输入商品价格">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">库存</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="count" placeholder="请输入库存数量">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn-primary form-control">提交</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!--对话框-->
    <div class="my-dialog-shadow"></div>
    <div class="panel panel-default my-dialog">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        内容
      </div>
      <div class="panel-footer">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm">按钮1</button>
          <button type="button" class="btn btn-default btn-sm">按钮2</button>
        </div>
      </div>
    </div>
  </body>
</html>
